<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
  <title>订单管理</title>
  <link rel="icon" href="/static/images/favicon.ico" type="image/ico">
  <meta name="keywords" content="LightYear,光年,后台模板,后台管理系统,光年HTML模板">
  <meta name="description" content="LightYear是一个基于Bootstrap v3.3.7的后台管理系统的HTML模板。">
  <meta name="author" content="yinqi">
  <link href="/static/css/bootstrap.min.css" rel="stylesheet">
  <link href="/static/css/materialdesignicons.min.css" rel="stylesheet">
  <link href="/static/css/animate.css" rel="stylesheet">
  <link href="/static/css/style.min.css" rel="stylesheet">
  <link href="/static/js/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
  <!--对话框-->
  <link rel="stylesheet" href="/static/js/jconfirm/jquery-confirm.min.css">
</head>

<body>
<div class="container-fluid p-t-15">

  <div class="row">
    <div class="col-lg-12">
      <div class="card">
        <div class="card-header"><h4>订单管理</h4></div>
        <div class="card-body">

          <div id="toolbar" class="toolbar-btn-action">
            <button id="btn_delete" type="button" class="btn btn-danger">
              <span class="mdi mdi-window-close" aria-hidden="true"></span>批量删除
            </button>
          </div>
          <table id="table"></table>

        </div>
      </div>
    </div>

  </div>

</div>

<!--查看订单详细信息的模态框-->
<div class="modal fade" id="orderInfoModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
            aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">订单详情</h4>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-xs-4">订单号：</div>
          <div class="col-xs-8" id="orderId"></div>
        </div>
        <div class="row">
          <div class="col-xs-4">客户姓名：</div>
          <div class="col-xs-8" id="customerName"></div>
        </div>
        <div class="row">
          <div class="col-xs-4">客户电话：</div>
          <div class="col-xs-8" id="customerPhone"></div>
        </div>
        <div class="row">
          <div class="col-xs-4">司机姓名：</div>
          <div class="col-xs-8" id="driverName"></div>
        </div>
        <div class="row">
          <div class="col-xs-4">司机电话：</div>
          <div class="col-xs-8" id="driverPhone"></div>
        </div>
        <div class="row">
          <div class="col-xs-4">订单车型：</div>
          <div class="col-xs-8" id="carTypeName"></div>
        </div>
        <div class="row">
          <div class="col-xs-4">车辆牌号：</div>
          <div class="col-xs-8" id="licence"></div>
        </div>
        <div class="row">
          <div class="col-xs-4">创建时间：</div>
          <div class="col-xs-8" id="createTime"></div>
        </div>
        <div class="row">
          <div class="col-xs-4">预约时间：</div>
          <div class="col-xs-8" id="appointmentTime"></div>
        </div>
        <div class="row">
          <div class="col-xs-4">完成时间：</div>
          <div class="col-xs-8" id="completionTime"></div>
        </div>
        <div class="row">
          <div class="col-xs-4">起点：</div>
          <div class="col-xs-8" id="startPoint"></div>
        </div>
        <div class="row">
          <div class="col-xs-4">终点：</div>
          <div class="col-xs-8" id="endPoint"></div>
        </div>
        <div class="row">
          <div class="col-xs-4">距离：</div>
          <div class="col-xs-8" id="distance"></div>
        </div>
        <div class="row">
          <div class="col-xs-4">订单价格：</div>
          <div class="col-xs-6" id="price"></div>
          <div class="col-xs-2">
            <a data-toggle="collapse" href="#collapsePriceDetail" aria-expanded="false"
               aria-controls="collapsePriceDetail">
              <small class="text-primary">查看详情</small>
            </a>
          </div>
        </div>
        <div class="row">
          <div class="col-xs-12">
            <div class="collapse m-t-10" id="collapsePriceDetail">
              <div class="well">
                <div class="row">
                  <div class="col-xs-4">价格类型</div>
                  <div class="col-xs-4">价格标准</div>
                  <div class="col-xs-4">您的费用</div>
                </div>
                <div class="row" id="startPrice">
                  <div class="col-xs-4">起步价(5公里)：</div>
                  <div class="col-xs-4"><strong>-</strong> 元</div>
                  <div class="col-xs-4"><strong>-</strong> 元</div>
                </div>
                <div class="row" id="priceBetween5And25">
                  <div class="col-xs-4">分段价(5~25公里)：</div>
                  <div class="col-xs-4"><strong>-</strong> 元/公里</div>
                  <div class="col-xs-4"><strong>-</strong> 元</div>
                </div>
                <div class="row" id="priceBetween25And60">
                  <div class="col-xs-4">分段价(25~60公里)：</div>
                  <div class="col-xs-4"><strong>-</strong> 元/公里</div>
                  <div class="col-xs-4"><strong>-</strong> 元</div>
                </div>
                <div class="row" id="priceGt60">
                  <div class="col-xs-4">分段价(大于60公里)：</div>
                  <div class="col-xs-4"><strong>-</strong> 元/公里</div>
                  <div class="col-xs-4"><strong>-</strong> 元</div>
                </div>
                <div class="row">
                  <div class="col-xs-4">总计：</div>
                  <div class="col-xs-offset-4 col-xs-4"><strong class="text-danger" id="total_price">-</strong> 元</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-xs-4">备注：</div>
          <div class="col-xs-8" id="remark"></div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
      </div>
    </div>
  </div>
</div>

<script type="text/javascript" src="/static/js/jquery.min.js"></script>
<script type="text/javascript" src="/static/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/static/js/perfect-scrollbar.min.js"></script>
<script type="text/javascript" src="/static/js/bootstrap-table/bootstrap-table.min.js"></script>
<script type="text/javascript" src="/static/js/bootstrap-table/bootstrap-table-zh-CN.min.js"></script>

<!--行内编辑插件-->
<link href="/static/js/x-editable/1.5.1/bootstrap3-editable/css/bootstrap-editable.min.css" rel="stylesheet">
<script type="text/javascript"
        src="/static/js/x-editable/1.5.1/bootstrap3-editable/js/bootstrap-editable.min.js"></script>
<script type="text/javascript"
        src="/static/js/bootstrap-table/extensions/editable/bootstrap-table-editable.min.js"></script>
<!--对话框-->
<script src="/static/js/jconfirm/jquery-confirm.min.js"></script>
<script type="text/javascript" src="/static/js/main.min.js"></script>
<script src="/static/js/bootstrap-notify.min.js"></script>
<script type="text/javascript" src="/static/js/lightyear.js"></script>
<script src="/static/js/mycommons.js"></script>
<script type="text/javascript">
  $('#table').bootstrapTable({
    classes: 'table table-bordered table-hover table-striped',
    url: '/orders',
    method: 'get',
    dataType: 'json',
    uniqueId: 'id',
    idField: 'id',             // 每行的唯一标识字段
    toolbar: '#toolbar',       // 工具按钮容器
    //clickToSelect: true,     // 是否启用点击选中行
    showColumns: true,         // 是否显示所有的列
    showRefresh: true,         // 是否显示刷新按钮

    //showToggle: true,        // 是否显示详细视图和列表视图的切换按钮(clickToSelect同时设置为true时点击会报错)

    pagination: true,                    // 是否显示分页
    paginationLoop: false,                // 禁用分页循环
    paginationSuccessivelySize: 5,        // 连续的最大连续页数
    paginationPagesBySide: 1,            // 当前页面每侧（右、左）的页数
    sortOrder: "asc",                    // 排序方式
    queryParams: function (params) {
      let param = {
        limit: params.limit,         // 每页数据量
        page: (params.offset / params.limit) + 1, //查询页码
        search: params.search,        // 搜索内容
        status: 2   //已完成状态
      };
      return param;
    },                                   // 传递参数
    sidePagination: "server",            // 分页方式：client客户端分页，server服务端分页
    pageNumber: 1,                       // 初始化加载第一页，默认第一页
    pageSize: 5,                        // 每页的记录行数
    pageList: [5, 6, 7, 8, 9, 10],         // 可供选择的每页的行数
    search: true,                      // 是否显示表格搜索，此搜索是客户端搜索
    searchHighlight: true,          // 搜索高亮
    searchOnEnterKey: true,         //按 Enter 键搜索

    //showExport: true,        // 是否显示导出按钮, 导出功能需要导出插件支持(tableexport.min.js)
    //exportDataType: "basic", // 导出数据类型, 'basic':当前页, 'all':所有数据, 'selected':选中的数据

    columns: [{
      checkbox: true    // 是否显示复选框
    }, {
      field: 'id',
      title: 'ID',
      sortable: true    // 是否排序
    }, {
      field: 'customer.id',
      visible: false
    }, {
      field: 'customer.name',
      title: '客户姓名',
      formatter: aFormatter,
      events: {
        'click a': function (event, value, row, index) {
          addTab("客户管理", "/customerPage?cNameId=" + row.customer.id)
        }
      }
    }, {
      field: 'dId',
      visible: false
    }, {
      field: 'driver.name',
      title: '司机姓名',
      formatter: aFormatter,
      events: {
        'click a': function (event, value, row, index) {
          addTab("已注册司机", "/driver_registered?dId=" + row.dId)
        }
      }
    }, {
      field: 'carType.id',
      visible: false
    }, {
      field: 'car.id',
      visible: false
    }, {
      field: 'car.licence',
      title: '货车牌号',
      formatter: aFormatter,
      events: {
        'click a': function (event, value, row, index) {
          addTab("车辆管理", "/carPage?carId=" + row.car.id)
        }
      }
    }, {
      field: 'createTime',
      title: '创建时间',
      formatter: formatTimeStr
    }, {
      field: 'appointmentTime',
      title: '预约时间',
      formatter: formatTimeStr
    }, {
      field: 'completionTime',
      title: '完成时间',
      formatter: formatTimeStr
    }, {
      field: 'distance',
      visible: false
    }, {
      field: 'price',
      title: '订单价格',
      formatter: function (value, row, index) {
        return value + ' 元'
      }
    }, {
      field: 'operate',
      title: '操作',
      formatter: btnGroup,  // 自定义方法
      events: {
        'click .edit-btn': function (event, value, row, index) {
          editUser(row.id);
        },
        'click .del-btn': function (event, value, row, index) {
          tb_deleteOne(row.id, '/orders')
        },
        'click .show-btn': function (event, value, row, index) {
          showOrder(row.id, row.carType.id, row.price, row.distance, 2)
        }
      }
    }],
    onLoadSuccess: function (data) {
      $("[data-toggle='tooltip']").tooltip();
    }
  });

  // 操作方法 - 编辑
  function editUser() {
    msgNotify("订单信息不可编辑", 'danger', 1500)
  }

  //批量删除的方法
  tb_deleteBatch('/orders')

  function fillOtherOrderInfo(order) {
    $("#driverName").html(order.driver.name)
    $("#driverPhone").html(order.driver.phone)
    $("#completionTime").html(formatTimeObj(order.completionTime))
  }

</script>
</body>
</html>